html,
body,
#app {
  height: 100%;
}

body {
  color: #333;
}

a {
  color: #333;
}

#app > div {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header {
  flex-shrink: 0;
  position: relative;
}

.main {
  flex: 1;
  overflow-y: auto;
}

.app-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .func_height_vw(@base-width, 176);

  color: #fff;
  background: @green;

  .title {
    flex: 1;
overflow: hidden;
    max-width: 80%;
    margin: 0 auto;
    text-overflow: ellipsis;
    white-space: nowrap;


    .rem(60);
    text-align: center;
  }

  a {
    color: #fff;
  }

  .btn-back {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    .func_width_vw(146);
    text-align: center;
    &::before {
      content: ' ';
      display: inline-block;
      overflow: hidden;
      width: 0;
      height: 100%;
      margin-bottom: 0.2em;
      vertical-align: middle;
    }
  }
}
.nav {
  height: 50%;
  overflow-x: auto;

  display: flex;
  align-items: center;
  
  padding: 0 0.6em;
  .rem(44);
  line-height: 2.1;
  background: @green-light;

  a {
    flex: 1;
    flex-shrink: 0;
    margin: 0 0.6em;
    padding: 0 0.3em;
    white-space: nowrap;
    border-bottom: 0.3em solid transparent;

    &.active {
      border-bottom-color: @green;
    }
  }
}

.no-more {
  padding-top: 2em;
  padding-right: 1rem;
  .rem(48);
  color: #939393;
  text-align: center;
}

.nav-bot {
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;

  .func_height_vw(1242, 175);
  border-top: 1px solid #d0d0d0;

  a {
    flex: 1;
    .rem(40);

    &::before {
      margin-bottom: 0.2em;
      
    }

    &.active {
      color: @green;
    }

    &.index{
      &::before{.ico(90, 85, @xcqy,1,background);}

      &.active{
        &::before{
          background-image: @xcqy-a;
        }
      }
    }
    &.otherco{
      &::before{.ico(90, 85, @qtqy,1,background);}

      &.active{
        &::before{
          background-image: @qtqy-a;
        }
      }
    }
    &.profile{
      &::before{.ico(90, 85, @my,1,background);}

      &.active{
        &::before{
          background-image: @my-a;
        }
      }
    }

    
  }
}

.btn-logout {
  display: flex;
  align-items: center;
  &::before {
    .ico(65, 65, #eee, 0);
    margin-right: 0.3em;
  }
}

.footer {
  padding: 1em 0;
  .rem(40);
  color: @gray;
  line-height: 72 / 40;
  text-align: center;
}
